<template>
    <div>
      <!-- 顶部 -->
      <div class="header">威动科技</div>
      <!-- 顶部返回上一页 -->
      <div class="back" @click="$router.go(-1)" v-if='$route.path !== "/home"' style="left: 5px;">
          <span><van-icon name="arrow-left" />返回</span>
      </div>
      <!-- 路由占位符 -->
      <transition enter-active-class="animated fadeInUp">
          <router-view></router-view>
      </transition>
      <!-- 底部 -->
      <van-tabbar route v-model="activeindex" v-if='$route.path !== "/shopcar"' @change="onChange" >
        <van-tabbar-item to="/home">
          <i slot="icon" class="iconfont icon-index-fill"></i>
          <span>首页</span>
        </van-tabbar-item>
        <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
        <van-tabbar-item to="/shopcar" icon="cart-o" :info="getCounts">购物车</van-tabbar-item>
        <van-tabbar-item to="/member" icon="setting-o">
          <i slot="icon" class="iconfont icon-icon_zhanghao"></i>
          <span>会员</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
import { mapGetters,mapMutations } from "vuex";
export default {
  data () {
    return {
      activeindex: 0
    }
  },
  created () {
    this.initCar();
    this.onChange();
  },
  methods: {
    ...mapMutations(['initCar']),
    onChange(){
      sessionStorage.setItem('activeindex', JSON.stringify(this.activeindex));
    }
  },
  computed:{
    ...mapGetters(["getCounts"])
  },
}
</script>

<style scoped lang='less'>
.header{
  width: 100%;
  height:40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
/* 顶部返回上一页 */

.back,.addgood {
    z-index: 2;
    position: fixed;
    top: 0;
    background-color: transparent;
    height: 40px;
    width: 50px;
    font-size: 14px;
    line-height: 40px;
    color: #fff;
      .van-icon {
      position: relative;
      top: 2px;
      left: 0;
      font-size: 16px;
      padding-right: 5px;
  }
}
</style>
